<template>
	<view>
		<canvas class="can" style="height: 100vh;" canvas-id="shareCanvas"></canvas>
		<button @click="myshare">分享</button>

	</view>
</template>

<script>
	
	export default {
		data() {
			return {
	
			};
		},
		props: {
			canvasParams: {
				type: Object,
				default: () => {}
			},
			
		},
		computed: {
			
		},
		mounted() {

		},
		methods: {
			//封装得到图片信息的方法
			getImageinfo(src) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: src,
						success(data) {
							resolve(data)
						},
						fail(info) {
							reject(info)
						}
					})
				})
			},
			// 因为没有对应后端的接口，这里使用的是从本地得到的图片
			getImg() {
				return new Promise((resolve, reject) => {
					uni.chooseImage({
						success: function(res) {
							resolve(res.tempFilePaths[0])
						},
						fail: function(info) {
							reject(info)
						}
					})
				})
			},
			// 保存图片，这方法不严谨。更好地保存方法，请参考[https://developers.weixin.qq.com/community/develop/article/doc/000a60125f4cc85356b8bf2bd5bc13](https://developers.weixin.qq.com/community/develop/article/doc/000a60125f4cc85356b8bf2bd5bc13)
			saveImage(file) {
				const _this = this
				uni.showLoading({
					title: "保存中",
				})
				uni.saveImageToPhotosAlbum({
					filePath: file,
					success() {
						uni.showToast({
							title: "保存成功",
							icon: "none"
						})
					},
					complete() {
						uni.hideLoading()
					}
				})
			},
			// 分享
			async myshare() {
				const _this = this
				uni.showLoading({
					title: "图片正在加载中",
					mask: true
				})
				_this.isShare = true //在data里定义isShare属性
				const img1 = await _this.getImageinfo(await _this.getImg())
				const img2 = await _this.getImageinfo(await _this.getImg())
				const img3 = await _this.getImageinfo(await _this.getImg())
				// console.log(img1, img2)
				Promise.all([
					img1,
					img2,
					img3
				]).then(res => {
					console.log(res)
					const ctx = uni.createCanvasContext("shareCanvas")
					//头部信息
					let avatarurl_width = 60, //绘制的头像宽度
						avatarurl_heigth = 60, //绘制的头像高度
						avatarurl_x = 0, //绘制的头像在画布上的位置
						avatarurl_y = 0 //绘制的头像在画布上的位置
					// 背景图片--start
					//背景颜色
					ctx.rect(0, 0, 600, 600)
					ctx.setFillStyle('yellow')
					ctx.fill()
					// ctx.drawImage(res[0].path, 0, 0, 375, 600)
					// 背景图片--end
					ctx.save()
					ctx.beginPath()
					// 画圆+填充图片--start
					ctx.arc(avatarurl_width / 2 + avatarurl_x, avatarurl_heigth / 2 + avatarurl_y,
						avatarurl_width / 2, 0, Math.PI *
						2, false);
					ctx.clip();
					ctx.drawImage(res[1].path, avatarurl_x, avatarurl_y, avatarurl_width, avatarurl_heigth);
					// 画圆+填充图片--end
					ctx.restore(); //恢复之前保存的绘图上下文状态 可以继续绘制
					ctx.font = 'normal normal 30px sans-serif';
					ctx.setFontSize(12) //字体大小
					ctx.setFillStyle('#ffffff')
					ctx.fillText('我的名字', 70, 30);

					// /头部文字 长按识别二维码进入可打开小程序 进入点免费创建 让你图片带着名片飞出去
					ctx.setTextAlign('center') //字体居中
					ctx.setFillStyle('#333333') //字体颜色
					ctx.setFontSize(12) //字体大小
					ctx.fillText('长按识别二维码进入可打开小程序', 375 / 2, 40 - 0.5)
					ctx.fillText('进入点免费创建 让你图片带着名片飞', 375 / 2, 72 - 0.5)
					// 中间图片
					ctx.drawImage(res[2].path, 100, 100, 100, 100)
					ctx.setFillStyle('#ffffff')
					ctx.fillText('扫描二维码', 375 / 2, 540 - 0.5)
					ctx.fillText('和我一起赚钱', 375 / 2, 570 - 0.5)

					//第三个图片
					ctx.drawImage(res[1].path, 100, 200, 100, 100)
					ctx.draw(false, function() {
						uni.canvasToTempFilePath({
							x: 0,
							y: 0,
							// width: 375,
							// height: 600,
							// destWidth: uni.getSystemInfoSync().windowWidth, //防止图片模糊
							// destHeight: uni.getSystemInfoSync().windowHeight,
							canvasId: 'shareCanvas',
							success(res) {
								uni.hideLoading()
								_this.isShare = false
								uni.previewImage({
									urls: [res.tempFilePath],
									longPressActions: {
										itemList: ["发送给朋友", "保存图片", "收藏"],
										success(data) {
											console.log('选中了第' + (data.tapIndex + 1) +
												'个按钮,第' + (data.index + 1) + '张图片');
										},
										fail(err) {
											console.log(err.errMsg)
										}
									}
								})
								// _this.saveImage(res.tempFilePath)
							}
						})
					}, 500)
				})
			},
		}

	};
</script>


<style>
	.modal-qrcode {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background: #000;
		opacity: 0.7;
		overflow: hidden;
		z-index: 200;
		color: #fff;
	}

	canvas {
		width: 600upx;
		height: 900upx;
		background: #fff;
		border-radius: 10upx;
		/* margin: 100upx auto; */
		box-shadow: 1upx 1upx 4upx 4upx rgba(0, 0, 0, 0.2);
		z-index: 250;
		position: fixed;
		left: 75upx;
		top: 8%;
	}
</style>
